<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<%@ include file="../common/required.jspf" %>
		<meta charset="utf-8" />
		<title>网上书城-地址</title>
		<link rel="stylesheet" type="text/css" href="${ctx }/statics/common/vendor/normalize.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="${ctx }/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="${ctx }/statics/common/vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="${ctx }/statics/store/css/common.css" />
		<link rel="stylesheet" href="${ctx }/statics/store/css/address.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="${ctx }/statics/store/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx }/statics/store/img/favicon.ico">
	</head>

	<body>
		<%@ include file="../common/header.jspf" %>
		<section style="width: 100%; height: .6rem;"></section>

		<section class="address-container">
		<form action="${ctx }/store/shopping/addOrUpdateAddress" onsubmit="receiveAddress.checkAddress();" >
			<div class="container-message">
			<input type="hidden" name="id" id="addressId" value="" />
				<div class="message-inner">
					<input type="text" name="receiver" id="receiver" placeholder="请填写你的真实姓名" />
					<select name="province" id="province" >
		    			<option value="">--请选择所在省市--</option>
		    			<option value="北京市">北京市</option>
		    			<option value="上海市">上海市</option>
		    			<option value="重庆市">重庆市</option>
		    		</select>&nbsp;&nbsp;
					<select name="city" id="city">
		    			<option value="" >--请选择所在城市--</option>
		    			<option value="上海">上海</option>
		    			<option value="重庆">重庆</option>
		    			<option value="长沙">长沙</option>
		    			<option value="武汉">武汉</option>
		    			<option value="昆明">昆明</option>
		    		</select>&nbsp;&nbsp;
					<select name="area" id="area">
		    			<option value="">--请选择所在地区--</option>
		    			<option value="沙坪坝区">沙坪坝区</option>
		    			<option value="呈贡区">呈贡区</option>
		    			<option value="五华区">五华区</option>
		    			<option value="虹口区">虹口区</option>
		    			<option value="渝中区">渝中区</option>
		    		</select>
					<input name="address" id="address" type="text" placeholder="详细地址（不必重复填写地址）" />
					<input name="phone" id="phone" type="text" placeholder="手机或者电话" />
					<input type="submit" value="保存" id="submit" />
				</div>
			</div>
		</form>
		<c:if test="${empty receiveAddresses}">
	
				<div style="width:100%;height:.5rem;text-align:center"><span id="logSpan" style="font-size: .16rem;color:#999999">您还没有添加地址</span></div>
			
		</c:if>
			
			<c:forEach items="${receiveAddresses }" var="receiveAddress" varStatus="v" >
			<div class="container-address">
				<c:if test="${receiveAddress.state==0}">
					<p style="color:red;">(默认)</p>
				</c:if>
				<p>${receiveAddress.receiver }(${receiveAddress.phone })</p>
				<p>${receiveAddress.province } ${receiveAddress.city } ${receiveAddress.area } ${receiveAddress.address }</p>
				<div class="p-line"></div>
				<div class="address-editor">
					<div  onclick="receiveAddress.updateAddress('${receiveAddress.id }','${receiveAddress.receiver }','${receiveAddress.phone }','${receiveAddress.province }','${receiveAddress.city }','${receiveAddress.area }','${receiveAddress.address }')" class="editor-left" style="width: 33%;">
						<i class="fa fa-edit"></i>
						<span>编辑</span>
					</div>
					<div onclick="receiveAddress.useToDefault('${receiveAddress.id }')" style="width: 33%;height: 100%;float: left;border-right: 1px solid #CCCCCC;cursor: pointer;">
						<i class="fa fa-check-square-o" aria-hidden="true"></i>
						<span>设为默认</span>
					</div>
					<div class="editor-right" style="width: 33%;" onclick="receiveAddress.deleteAddress('${receiveAddress.id }')">
						<i class="fa fa-trash-o"></i>
						<span>删除</span>
					</div>
				</div>
			</div>
			</c:forEach>
		</section>

		<script src="${ctx }/statics/store/js/resize.js"></script>
		<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
		<script src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
		<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
		<script type="text/javascript">
			var receiveAddress = {
				updateAddress : function(id,receiver,phone,province,city,area,address){
					
					$("#addressId").val(id);
					$("#receiver").val(receiver);
					$("#phone").val(phone);
					$("#province").val(province);
					$("#city").val(city);
					$("#area").val(area);
					$("#address").val(address);
				},
				deleteAddress: function(id){
					location="${ctx }/store/shopping/deleteReceiveAddress?addressId=" + id;
				},
				useToDefault: function(id){
					location="${ctx }/store/shopping/useAddressToDefault?addressId=" + id;
				},
				checkAddress : function(){
					var receiver = $('#receiver').val();
					var province = $('#province').val();
					var city = $('#city').val();
					var area = $('#area').val();
					var address = $('#address').val();
					var phone = $('#phone').val();
					if(receiver == "" || receiver == null){
						alert("收货人不能为空!");
						return false;
					}else if(province == "" || province == null){
						alert("省市不能为空!");
						return false;
					}else if(city == "" || city == null){
						alert("城市市不能为空!");
						return false;
					}else if(area == "" || area == null){
						alert("地区不能为空!");
						return false;
					}else if(address == "" || address == null){
						alert("详细地址不能为空!");
						return false;
					}else if(phone == "" || phone == null){
						alert("联系电话不能为空!");
						return false;
					}else if(!new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))[0-9]{8}$").test(phone)){
						alert("请输入正确的联系电话!");
						return false;
					}else{
						return true;
					}
				}
			}
		
		
		</script>
	</body>

</html>